<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>销售提单明细</title>
    <link rel="stylesheet" href="http://static-online.zhaogangtest.com/publicresource/css/bootstrap-table.css">
   
    <link rel="stylesheet" href="../../../resources/public/css/bootstrap-table-fixed-columns.css">
    <link rel="stylesheet" href="http://static-online.zhaogangtest.com/publicresource/control/daterangpicker/daterangepicker-bs3.css"> 
    <link rel="stylesheet" href="../../../resources/public/css/table.css">
    <link rel="stylesheet" href="../../../resources/public/css/iconfont.min.css">
    <link rel="stylesheet" href="../../../resources/public/css/scmstrap.css">
</head>

<body>
    <div class="main">
        <!-- 条件区域 -->
        <div class="form-list">
            <div class="group">
                <label>订单号</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input">
                </div>
            </div>
            <div class="group group-select">
                <label>结单状态</label>
                <div class="selectshow selectshowAction scm-input-wrap">
                    <input type="text" class="scm-input hand" readonly="" placeholder="全部">
                </div>
                <ul class="select" style="display: none;">
                    <li>全部</li>
                    <li>未结单</li>
                    <li>已结单</li>
                </ul>
            </div>
            <div class="group">
                <label>订单号</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input">
                </div>
            </div>
             <div class="group">
                <label>定价名称</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input">
                </div>
            </div>
            <div class="group group-select  group-selectSearch">
                <label>购货单位</label>
                <div class="selectshowAction scm-input-wrap  selectshow" id="company">
                    <input type="text" class="scm-input" placeholder="">
                </div>
                <div class="select-search select" style="display: none;">
                    <div class="select-search-container" id="companywrap">
                    </div>
                </div>
            </div>
            <div class="group group-select  group-selectSearch">
                <label>品类</label>
                <div class="selectshowAction scm-input-wrap  selectshow" id="company1">
                    <input type="text" class="scm-input" placeholder="">
                </div>
                <div class="select-search select" style="display: none;">
                    <div class="select-search-container" id="companywrap1">
                    </div>
                </div>
            </div>
            <div class="group group-select  group-selectSearch">
                <label>品名</label>
                <div class="selectshowAction scm-input-wrap  selectshow" id="company2">
                    <input type="text" class="scm-input" placeholder="">
                </div>
                <div class="select-search select" style="display: none;">
                    <div class="select-search-container" id="companywrap2">
                    </div>
                </div>
            </div>
            <div class="group group-select  group-selectSearch">
                <label>材质</label>
                <div class="selectshowAction scm-input-wrap  selectshow" id="company3">
                    <input type="text" class="scm-input" placeholder="">
                </div>
                <div class="select-search select" style="display: none;">
                    <div class="select-search-container" id="companywrap3">
                    </div>
                </div>
            </div>
            <div class="group">
                <label>规格</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input">
                </div>
            </div>
            <div class="group group-select">
                <label>业务机构</label>
                <div class="selectshow selectshowAction scm-input-wrap">
                    <input type="text" class="scm-input hand" readonly="" placeholder="全部">
                </div>
                <ul class="select" style="display: none;">
                    <li>全部</li>
                    <li>未结单</li>
                    <li>已结单</li>
                </ul>
            </div>
            <div class="group group-select">
                <label>业务部门</label>
                <div class="selectshow selectshowAction scm-input-wrap">
                    <input type="text" class="scm-input hand" readonly="" placeholder="全部">
                </div>
                <ul class="select" style="display: none;">
                    <li>全部</li>
                    <li>未结单</li>
                    <li>已结单</li>
                </ul>
            </div>
            <div class="group group-select  group-selectSearch">
                <label>制单人</label>
                <div class="selectshowAction scm-input-wrap  selectshow" id="company5">
                    <input type="text" class="scm-input" placeholder="">
                </div>
                <div class="select-search select" style="display: none;">
                    <div class="select-search-container" id="companywrap5">
                    </div>
                </div>
            </div>
            <div class="group">
                <label>备注</label>
                <div class="scm-input-wrap">
                    <input type="text" class="scm-input">
                </div>
            </div>
             <div class="group group-data">
                <label>创建时间</label>
                <div class="scm-input-wrap">
                    <i class="anticon icon-calendar"></i>
                    <input type="text" class="scm-input active" id="datepicker" placeholder="开始时间  ~  结束时间">
                </div>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="operation">
            <div class="conditionbtn">
                <button class="scm-btn blue">
                    <i class="anticon icon-search1"></i>查询</button>
                <button class="scm-btn">
                    <i class="anticon icon-delete"></i>重置</button>
            </div>
             <div class="scm-btn-group fr">
                    <button class="scm-btn">
                    <i class="anticon icon-export"></i>导出</button>
                </button>
            </div>
        </div>
        <div class="box-table">
            <table class="table table-condensed" id="table-parent"></table>
        </div>
    </div>
    <script src="http://static-online.zhaogangtest.com/publicresource/js/require.js"></script>
    <script>
        var page;

        require.config({
            paths: {
                "jquery": "../../../resources/public/js/jquery.min",
                "bootstrap": 'http://static-online.zhaogangtest.com/publicresource/js/bootstrap.min',
                // "bootstrap-table": "http://static-online.zhaogangtest.com/publicresource/js/bootstrap-table",
                "bootstrap-table": "../../../resources/public/js/bootstrap-table",
                "moment": "http://static-online.zhaogangtest.com/publicresource/control/daterangpicker/moment.min",
                "daterangepicker": "../../../resources/public/js/daterangepicker",

                "layer": 'http://static-online.zhaogangtest.com/publicresource/control/layer/layer.min',
                "public": "../../../resources/public/js/public",
                "chinese": "../../../resources/public/js/chinese",
                "bootstrap-table-fixed": "../../../resources/public/js/bootstrap-table-fixed-columns",
                "autocomplete": "../../../resources/public/js/jquery.autocomplete",
            },
            shim: {
                "jquery": {
                    exports: ['jQuery', '$']
                },
                "bootstrap": {
                    deps: ["jquery"]
                },
                "bootstrap-table": {
                    deps: ["jquery", "bootstrap"]
                },
                "bootstrap-table-fixed": {
                    deps: ["bootstrap-table"]
                },
                "layer": {
                    deps: ["jquery"],
                    exports: "layer"
                },
                "autocomplete": {
                    deps: ['jquery']
                }, 
                "moment": {
                    deps: ['jquery']
                },
                "daterangepicker": {
                    deps: ["jquery", "moment"],
                    exports: "daterangepicker"
                },
                "chinese": {
                    deps: ["jquery", "bootstrap-table"],
                },

                "public": {
                    deps: ["jquery", "bootstrap-table","moment","daterangepicker"]
                }
            }
        });
        require([ "autocomplete","public", "layer", "chinese", "bootstrap-table-fixed"], function () {
            layer.config({
                path: 'http://static-online.zhaogangtest.com/publicresource/control/layer/'
            });
            $(function () {
                page = {
                    init: function () {
                        this.bootstrapTable();
                        this.autocomplete();

                        var that = this;
                        $(window).resize(function () {
                            $('#table-parent').bootstrapTable('resetView', {
                                height: that.getHeight()
                            });
                            $('.daterangepicker').hide()
                        });
                         $.daterangepicker("#datepicker", {
                             singleDatePicker: false, 
                         });

                    },
                    bootstrapTable: function () {
                        $('#table-parent').bootstrapTable({
                            pagination: true, //在表格底部显示分页工具栏
                            pageSize: 50,
                            pageNumber: 1,
                            pageList: [10, 25, 50, 100],
                            height: page.getHeight(),
                            showFooter: true,
                            showColumns: false,
                            showRefresh: false,
                            //                    showToggle:true,
                            search: false,
                            //                    showPaginationSwitch:true,
                        //    detailView: true,
                         //   detailFormatter: page.showdetail,
                            // detailFormatter: this.showChild,
                            // onExpandRow: this.expandRow,
                            // onCollapseRow: this.collapseRow,
                            locales: 'zh-CN',
                            fixedColumns: false,
                            fixedNumber: 1,
                            url: '../data/erp/tablelist-salesbill-detail.json',
                            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）

                            columns: [{
                                "field": "n0",
                                "title": "序号",
                                formatter: function (value, row, index) {
                                    return index + 1
                                },
                                footerFormatter: "合计"
                            }, {
                                "field": "n1",
                                "title": "结单",
                            }, {
                                "field": "n2",
                                "title": "提单号",
                            }, {
                                "field": "n3",
                                "title": "制单日期",
                            }, {
                                "field": "n4",
                                "title": "提货仓库",
                            }, {
                                "field": "n5",
                                "title": "提货方式",

                            }, {
                                "field": "n6",
                                "title": "定价名称",
                            }, {
                                "field": "n7",
                                "title": "品名",
                            }, {
                                "field": "n8",
                                "title": "材质",
                            }, {
                                "field": "n9",
                                "title": "标准",
                                // footerFormatter: public.fn_sumformatter,
                                // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n10",
                                "title": "规格",
                                 // footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n11",
                                "title": "指定长度",
                                 // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n12",
                                "title": "品质",
                                 // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n13",
                                "title": "计量方式",
                                 // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n14",
                                "title": "交货状态",
                                 // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n15",
                                "title": "件支数",
                                 // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n16",
                                "title": "产品类型",
                                 // footerFormatter: public.fn_sumformatter,
                            }, {
                                "field": "n17",
                                "title": "应提数量",
                                footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n18",
                                "title": "应提重量",
                                footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n19",
                                "title": "实提数量",
                                footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n20",
                                "title": "实提重量",
                                footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n21",
                                "title": "含税单价",
                                // footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n22",
                                "title": "含税金额",
                                footerFormatter: public.fn_sumformatter,
                                
                            }, {
                                "field": "n23",
                                "title": "开单类型",
                            }, {
                                "field": "n24",
                                "title": "配货性质",
                            }, {
                                "field": "n25",
                                "title": "销售类型",
                            }, {
                                "field": "n26",
                                "title": "结算单位",
                            }, {
                                "field": "n27",
                                "title": "购货单位",
                                // footerFormatter: public.fn_sumformatter,

                            }, {
                                "field": "n28",
                                "title": "协议合同号",
                            }, {
                                "field": "n29",
                                "title": "结算数量",
                            }, {
                                "field": "n30",
                                "title": "结算重量",
                            }, {
                                "field": "n31",
                                "title": "结算含税金额",
                            }, {
                                "field": "n32",
                                "title": "备注",
                            }]
                        });
                    },
            
                    autocomplete: function () {
                        var data = ['上海钢找塑料', '上海钢富信息科技有限技有限公司', '上海找油网信息科技', '上海长城实业有限公司',
                            '上海找油网信息科技', '上海长城实业有限公司'
                        ]
                        $("#company input").autocomplete({
                            lookup: data,
                            minChars: 0,
                            appendTo: '#companywrap',
                            onSelect: function (suggestion) {
                                // $(this).val(suggestion.value);
                            },
                        });
                        $("#company1 input").autocomplete({
                            lookup: data,
                            minChars: 0,
                            appendTo: '#companywrap1',
                            onSelect: function (suggestion) {
                                // $(this).val(suggestion.value);
                            },
                        });
                        $("#company2 input").autocomplete({
                            lookup: data,
                            minChars: 0,
                            appendTo: '#companywrap2',
                            onSelect: function (suggestion) {
                                // $(this).val(suggestion.value);
                            },
                        });
                        $("#company3 input").autocomplete({
                            lookup: data,
                            minChars: 0,
                            appendTo: '#companywrap3',
                            onSelect: function (suggestion) {
                                // $(this).val(suggestion.value);
                            },
                        });
                        $("#company4 input").autocomplete({
                            lookup: data,
                            minChars: 0,
                            appendTo: '#companywrap4',
                            onSelect: function (suggestion) {
                                // $(this).val(suggestion.value);
                            },
                        });
                        $("#company5 input").autocomplete({
                            lookup: data,
                            minChars: 0,
                            appendTo: '#companywrap5',
                            onSelect: function (suggestion) {
                                // $(this).val(suggestion.value);
                            },
                        });
                    },
                    // 表格高度
                    getHeight: function () {
                        var _height = $('.form-list').outerHeight(
                            true) + $('.operation').outerHeight(true)
                        return $(window).height() - _height - 20;
                    },
                }
                page.init();
            })
        })
    </script>
</body>

</html>